/* Dit is de stylesheet van de responsive sub-webpage, behorend bij Colours & Style by Carla */

/* Make it responsive' */

/* EM:   Relative to the font-size of the element (2em means 2 times the size of the current font) */


@media only screen and (max-width: 600px) {
  body {
    background-color: lightseagreen;
  }
}


/* 
  Best Practice
  It is best practice to use relative file paths (if possible).
  When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer 
  (localhost) as well as on your current public domain and your future public domains. 
*/

/* This sets the margin property to auto to horizontally center the element within its container. 
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins. */
div {
  margin: auto;
}


/* Make the grid container voor de sub-webpage in de bijbehorende kleur  */
#myDIV {
  height: 500px;
  /* dit getal bepaalt de hoogte van de container */
  display: grid;
  gap: 1px;
  background-color: lightseagreen
  padding 5px;
  grid-template-columns: 250px 1000px 50px;
  grid-template-rows: auto auto;
}

#myDIV div {
  background-color: lightseagreen transparent;
  text-align: center;
  padding: 5px 0;
  font-size: 30px;
}

/* end of making grid-container */

/* Style de body voor de sub-webpage in de bijbehorende kleur */
body {
  background-color: lightseagreen;
  /* Standaard lettertype voor de website */
  font-family: 'Open Sans ';
  font-size: 18x;
}

/* Styling the images */
img.a {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  position: absolute;
  left: 5px;
  top: 10px;
}

/* Styling the text voor de sub-webpage in de bijbehorende kleur */
h1 {
  color: darkgreen;
  text-align: center;
}

h2 {
  color: darkgreen;
}

h3 {
  color: darkgreen;
}

/* Aparte opmaak voor text */
p.aparte_opmaak {
  color: blueviolet;
  text-align: left;
  font-size: 30px;
}

/* Outline-left */
p.out-left {
  color: darkgreen;
  text-align: left;
  font-size: 30px;
}

/* Outline right */
p.out-right {
  color: darkgreen;
  text-align: right;
  font-size: 30px;
}

/* Outline center */
p.out-center {
  color: darkgreen;
  text-align: center;
  font-size: 30px;
}

/* Prijs-contact-info */
p.prijs {
  color: whitesmoke;
  text-align: left;
    position: absolute;
      top: 25%;
      Left: 2%;
}
p.contact {
  color: whitesmoke;
  text-align: left;
  position: absolute;
  top: 35%;
  Left: 2%;
}



/* Settings voor Social Media Sidebar */
.social-sidebar {
  position: absolute;
  top: 18%;
  right: 2%;
  /* Bijna aan de rand rechts, maar toch een beetje ingesprongen */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  z-index: 1000;
}

.social-button {
  position: relative;
  background-color: lightseagreen;
  border: none;
  cursor: pointer;
  padding: 5px;
  /* afstand van de buttons tot elkaar */
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
  /* geen box shadow in dit design */

  /* Dit laat de sidebar op en neer bewegen, als je wilt */
  /*
    transition: transform 0.2s;
    animation: float 2.5s ease-in-out infinite;
    */
}

.social-button:hover {
  transform: scale(1.1);
}

.social-button img {
  width: 24px;
  height: 24px;
}

.social-button::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 110%;
  top: 50%;
  transform: translateY(-50%);
  background-color: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  font-size: 14px;
}

.social-button:hover::after {
  opacity: 1;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(0);
  }
}

@media (max-width: 600px) {
  .social-sidebar {
    flex-direction: row;
    top: auto;
    bottom: 10px;
    right: 50%;
    transform: translateX(50%);
  }

  .social-button::after {
    right: 50%;
    top: -40px;
    transform: translateX(50%);
  }
}

/* End Settings Social Media Sidebar*/

/* The Horizontal Ruler Line voor de sub-webpage in de bijbehorende kleur*/
hr.topline {
  border-top: 10px
    /* dikte van de lijn */
    solid darkgreen;
}